<template>
  <div>
      <div class="chunk" >
          <a-form :form="form" id="update-form" :hideRequiredMark="true">
              <div class="header">
                  <h3>一、总览</h3>
                  <div class="operate">
                      <a-button type="primary" @click="exportExcel" >导出统计报告</a-button>
                  </div>
              </div>
              <div class="form-main-content">
                  <a-row :gutter="10">
                      <a-col :span="8" class="form-item">
                          <a-form-item label="时间周期">
                              6个月
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="订单数">
                              40项
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="任务周期数">
                              231个
                          </a-form-item>
                      </a-col>
                  </a-row>
                  <a-row :gutter="10">
                      <a-col :span="8" class="form-item">
                          <a-form-item label="总架次">
                              36架次
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="总工作时长">
                              12小时 24分 45秒
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="共发生问题">
                              123个
                          </a-form-item>
                      </a-col>
                  </a-row>
                  <a-row :gutter="10">
                      <a-col :span="8" class="form-item">
                          <a-form-item label="投入各类设备数">
                              23台次
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="无人机工作时间">
                              10小时 12分 38秒
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="标签种类">
                              23个
                          </a-form-item>
                      </a-col>
                  </a-row>
                  <a-row :gutter="10">
                      <a-col :span="8" class="form-item">
                          <a-form-item label="总面积">
                              32平方公里
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="总里程">
                              35公里
                          </a-form-item>
                      </a-col>
                      <a-col :span="8" class="form-item">
                          <a-form-item label="总点数">
                              125个
                          </a-form-item>
                      </a-col>
                  </a-row>
              </div>
          </a-form>
            <div class="relate-service">
              <h3>二、正文报告</h3>
              <div class="report">
                  <div class="piece">
                    <h3>1 概论</h3>
                    <div class="report-text" >
                        <p>自2019年01月起 , 至2019年06月 , 肇庆市鼎湖区无人机巡检服务已经持续6个月 , 现将无人机巡检服务工作情况入如下汇报:</p>
                        <p>无人机巡检服务团队在这段时间内共计执行调度任务40项 , 232架次。 服务部门包括 : 鼎湖区公安局、水务局、农村振兴办、农业局、城管综合执法大队、招商局、区政府</p>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>2 无人机巡检详情</h3>
                    <div class="report-text" >
                        <p>在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。</p>
                        <div class="report-echarts" >
                            <div id="patrolData" ></div>
                        </div>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>2.1 河道巡检</h3>
                    <div class="report-text" >
                        <div class="text-data" >
                            <p class="indent" >简述 :</p>
                            <p> 
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                            </p>
                            <p class="indent" >在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。</p>
                        </div>
                        <div class="text-data" >
                            <p class="indent" >巡检内容 :</p>
                            <p>1.1 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.2 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.3 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.4 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.5 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                        </div>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>2.2 城市巡检</h3>
                    <div class="report-text" >
                        <div class="text-data" >
                            <p class="indent" >简述 :</p>
                            <p> 
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                                在这6个月的时间内 , 我司无人机巡检服务应用于鼎湖区军警安防、环境检测、应急求援、森林消防、城市管理、国土检测、交通监管、河道巡检等领域。
                            </p>
                        </div>
                        <div class="text-data" >
                            <p class="indent" >巡检内容 :</p>
                            <p>1.1 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.2 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.3 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.4 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                            <p>1.5 河道的漂浮物 ，包括大型障碍物 ，如沉船等 ；水面上大面积浮萍和水葫芦、漂浮垃圾等 ；</p>
                        </div>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>3 总结</h3>
                  </div>
                  <div class="piece">
                    <h3>2.2 城市巡检</h3>
                    <div class="report-text" >
                        <div class="text-data" >
                            <p class="indent" >自2019年01月起到2019年06月 ，目前已经完成服务的详细情况如下 :</p>
                        </div>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>4 鼎湖水利局</h3> 
                    <div class="report-text" >
                        <div class="text-data" >
                            <p class="indent" >自2019年01月起到2019年06月 ，无人机巡检服务为鼎湖水利局执行河道巡检任务共15架次 ，城市巡检共10架次 ，共计飞行25架次。</p>
                            <table border="1" class="data-table" >
                                <tr>
                                    <td>订单数</td>
                                    <td>飞机架次</td>
                                    <td>总计报告</td>
                                    <td>总计时间</td>
                                    <td>参与飞手</td>
                                    <td>距离计算</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>25</td>
                                    <td>28</td>
                                    <td>20小时 22分钟</td>
                                    <td>3</td>
                                    <td>25km</td>
                                </tr>
                            </table>
                            <p class="indent" >1 河道巡检订单名称1</p>
                            <p class="indent" >自2019年01月08日 ，接到税务局订单 ，我司派出飞手前往肇庆东站附近指定区域执行任务 ，任务详情如下 :</p>
                            <p class="indent" >订单时间 : 2019.01.08-2019.01.16</p>
                            <p class="indent" >调度单位 : 税务局</p>
                            <p class="indent" >任务地点 : 肇庆东站</p>
                            <p class="indent" >服务架次 : 共12个架次无人机调度服务</p>
                            <table border="1" class="data-table" >
                                <tr>
                                    <td>起止时间</td>
                                    <td>工作时长</td>
                                    <td>距离</td>
                                    <td>架次</td>
                                    <td>发现问题 (标注)</td>
                                </tr>
                                <tr>
                                    <td>2019-01-08 09:22:11</td>
                                    <td>20小时 22分钟</td>
                                    <td>12km</td>
                                    <td>12</td>
                                    <td>3</td>
                                </tr>
                            </table>
                            <p style="margin:0px;" class="indent" >设备清单</p>
                            <a-row :gutter="10">
                                <a-col :span='24'>
                                    <table border="1" class="label-table" >
                                        <tr>
                                            <td class="table-title" >设备类型</td><td class="table-text" >次数</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >72</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >32</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >42</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >24</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >82</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >29</td>
                                        </tr>
                                    </table>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                  </div>
                  <div class="piece">
                    <h3>常见问题</h3>
                    <a-row :gutter="10">
                        <a-col :span='6'  class="form-issue">
                            <div>
                                <ul>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                </ul>
                            </div>
                        </a-col>
                        <a-col :span='18' class="form-issue">
                            <div id="issueData"></div>
                        </a-col>
                    </a-row>
                  </div>
                  <div class="piece" >
                      <div class="report-text" >
                            <p class="indent" >2 河道巡检订单名称2</p>
                            <p class="indent" >自2019年01月08日 ，接到税务局订单 ，我司派出飞手前往肇庆东站附近指定区域执行任务 ，任务详情如下 :</p>
                            <p class="indent" >订单时间 : 2019.01.08-2019.01.16</p>
                            <p class="indent" >调度单位 : 税务局</p>
                            <p class="indent" >任务地点 : 肇庆东站</p>
                            <p class="indent" >服务架次 : 共12个架次无人机调度服务</p>
                            <table border="1" class="data-table" >
                                <tr>
                                    <td>起止时间</td>
                                    <td>工作时长</td>
                                    <td>距离</td>
                                    <td>架次</td>
                                    <td>发现问题 (标注)</td>
                                </tr>
                                <tr>
                                    <td>2019-01-08 09:22:11</td>
                                    <td>20小时 22分钟</td>
                                    <td>12km</td>
                                    <td>12</td>
                                    <td>3</td>
                                </tr>
                            </table>
                            <p style="margin:0px;" class="indent" >设备清单</p>
                            <a-row :gutter="10">
                                <a-col :span='24'>
                                    <table border="1" class="label-table" >
                                        <tr>
                                            <td class="table-title" >设备类型</td><td class="table-text" >次数</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >72</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >32</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >42</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >24</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >82</td>
                                        </tr>
                                        <tr>
                                            <td class="table-title" >入云龙无人机</td><td class="table-text" >29</td>
                                        </tr>
                                    </table>
                                </a-col>
                            </a-row>
                        </div>
                  </div>
                  <div class="piece">
                    <h3>常见问题</h3>
                    <a-row :gutter="10">
                        <a-col :span='6'  class="form-issue">
                            <div>
                                <ul>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                    <li>
                                        <span class="inssue-left" >1.标签名称a ：</span>
                                        <span class="inssue-right"> 出现次数23次</span>
                                    </li>
                                </ul>
                            </div>
                        </a-col>
                        <a-col :span='18' class="form-issue">
                            <div id="issueDataTwo"></div>
                        </a-col>
                    </a-row>
                  </div>
              </div>
            </div>
      </div>
  </div>
</template>

<script>
import { export_json_to_excel } from "@/utils/Export2Excel";
import {Row,Col,Card,Button,Form} from "ant-design-vue";
    export default {
        components:{
            ARow:Row,
            ACol:Col,
            ACard:Card,
            AButton:Button,
            ACardMeta:Card.Meta,
            AForm:Form,AFormItem:Form.Item,
        },
        data() {
            return {
                form: this.$form.createForm(this),
                //报告详情内容
                data: []
            }
        },

        methods: {
             getDetail(id) {
                 this.http('get', 'report/view', {id: id}).then(res => {
                     this.data = res.data
                 })
            },
            /**
             * 导出数据
             */
            exportExcel(){

            },
            patrolEcharts(){
                var patrolData = this.$echarts.init(document.getElementById("patrolData"));
                var option = {
                    color:["rgb(24, 118, 226)","rgb(11, 133, 21)"],
                    title : {},
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        y:'center',
                        data: [' 河道巡检 : 21次',' 城市巡检 : 30次'],
                        textStyle: {
                            color: '#fff'
                        },
                        icon:'rectangle'
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '70%',
                            center: ['40%', '50%'],
                            data:[
                                {value:335, name:' 河道巡检 : 21次'},
                                {value:260, name:' 城市巡检 : 30次'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                patrolData.setOption(option)
            },
            issueEcharts(){
                var issueData = this.$echarts.init(document.getElementById("issueData"));
                var issueChild = document.getElementById("issueData")
                var option = {
                    axisLabel: {
                        color: '#fff'
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {          
                            type : 'shadow'        
                        },
                        backgroundColor: '#fff',
                        borderRadius:'0px',
                        textStyle: {
                        fontSize: 16,
                        color: 'black'
                        },
                        formatter: '{b} : {c}'
                    },
                    grid: {
                        left: '6%',
                        right: '6%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            name:"标注",
                            data : ['Mon', 'Tue', '一二三四五六七八九十', 'Thu', 'Fri', 'Sat', 'Sun','ber'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgb(107, 122, 134)'
                                }
                            },
                            axisLabel:{
                               interval: 0
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name:"数量",
                            axisLine: {
                                lineStyle: {
                                    color: 'rgb(107, 122, 134)'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'filament',
                                    color:'rgb(12, 68, 121)'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barWidth: '43%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color:"#fff",
                                }
                            },
                            data:[1,2,3,4,5,6,7,8]
                        }
                    ]
                };
                issueData.setOption(option)
                issueChild.children[0].style.width = '100%'
                issueChild.children[0].children[0].style.width = '100%'
                window.onresize = function () {
                    issueData.resize();
                }
            },
            issueEchartsTwo(){
                var issueDataTwo = this.$echarts.init(document.getElementById("issueDataTwo"));
                var issueTwoChild = document.getElementById("issueDataTwo")
                var option = {
                    axisLabel: {
                        color: '#fff'
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {
                            type : 'shadow'
                        },
                        backgroundColor: '#fff',
                        borderRadius:'0px',
                        textStyle: {
                        fontSize: 16,
                        color: 'black'
                        },
                        formatter: '{b} : {c}'
                    },
                    grid: {
                        left: '6%',
                        right: '6%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            name:"标注",
                            data : ['厂区','公交总站','河道垃圾','石岩街道办事处','工业区','公司','学校','石龙仔市场',],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgb(107, 122, 134)'
                                }
                            },
                            axisLabel: {
                                formatter:function(params){
                                   var newParamsName = "";// 最终拼接成的字符串
                                    var paramsNameNumber = params.length;// 实际标签的个数
                                    var provideNumber = 4;// 每行能显示的字的个数
                                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                    /**
                                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                                     */
                                    // 条件等同于rowNumber>1
                                    if (paramsNameNumber > provideNumber) {
                                        /** 循环每一行,p表示行 */
                                        for (var p = 0; p < rowNumber; p++) {
                                            var tempStr = "";// 表示每一次截取的字符串
                                            var start = p * provideNumber;// 开始截取的位置
                                            var end = start + provideNumber;// 结束截取的位置
                                            // 此处特殊处理最后一行的索引值
                                            if (p == rowNumber - 1) {
                                                // 最后一次不换行
                                                tempStr = params.substring(start, paramsNameNumber);
                                            } else {
                                                // 每一次拼接字符串并换行
                                                tempStr = params.substring(start, end) + "\n";
                                            }
                                            newParamsName += tempStr;// 最终拼成的字符串
                                        }

                                    } else {
                                        // 将旧标签的值赋给新标签
                                        newParamsName = params;
                                    }
                                    //将最终的字符串返回
                                    return newParamsName
                                }  
                            }
                        }
                        
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name:"数量",
                            axisLine: {
                                lineStyle: {
                                    color: 'rgb(107, 122, 134)'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'filament',
                                    color:'rgb(12, 68, 121)'
                                }
                            },
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barWidth: '45%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    color:"#fff",
                                }
                            },
                            data:[32,51,62,140,49,92,36,3]
                        }
                    ]
                };
                issueDataTwo.setOption(option)
                issueTwoChild.children[0].style.width = '100%'
                issueTwoChild.children[0].children[0].style.width = '100%'
                window.onresize = function () {
                    issueDataTwo.resize();
                }
            }
        },
        mounted() {
            console.log(this.$route)
            this.id = this.$route.params.id;
            this.getDetail(this.id)
            this.patrolEcharts()
            this.issueEcharts()
            this.issueEchartsTwo()
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped >
@import "./../../assets/scss/mixin";
    .header {
        @include fj();
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }
    /deep/.ant-form-item-control-wrapper{
        margin-left: 10px;
    }
    .img-displayed {
        img + img {
            margin-left: 20px;
        }
    }
    .form-issue{
      ul li{
        text-indent: 1.3em;
        line-height: 35px;
      }
      #issueData,#issueDataTwo{
        width: 100%;
        height: 450px;
      }
      margin-bottom: 40px;
    }
    .label-table{
      border:1px solid black;
      font-size: 15x;
      line-height: 50px;
      text-align: center ;
      margin-bottom: 10px;
      tr td{
          border: 1px solid black;
      }
      .table-title{
        width: 300px ;
      }
      .table-text{
        width: 380px ;
      }
    }
    .report{
        padding: 10px 0px;
        padding-left: 10px;
        h3{
            padding: 5px 0px;
        }
        .report-text{
            padding-left: 20px;
            p{
                text-indent: 2.5em;
                margin-bottom: 10px;
                font-size: 15px;
                line-height: 25px;
            }
            .indent{
                text-indent: 0;
            }
            .data-table{
                width: 100%;
                border: 1px solid black;
                text-align: center;
                font-size: 15px;
                line-height: 50px;
                margin-bottom: 10px;
                tr td{
                    width: 200px;
                    border: 1px solid black;
                }
            }
        }
    }
    .report-echarts{
        border: 1px solid black;
        height: 300px;
        margin-top: 30px;
        margin-bottom: 15px;
        #patrolData{
            width: 100%;
            height: 100%;
            padding-left: 30px;
        }
    }
    
</style>